<template>
  <a-button
    type="primary"
    @click="$emit('back')"
    ghost
    style="margin: 25px 20px 10px 10px; font-size: 15px; float: right"
    >返回</a-button
  >
  <a-typography-title :level="2" style="margin: 20px 0px 20px 500px"
    >员工信息详情</a-typography-title
  >
  <a-descriptions
    title=" "
    bordered
    :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <a-descriptions-item label="分店编号">{{
      record.br_id
    }}</a-descriptions-item>
    <a-descriptions-item label="员工号">{{ record.st_id }}</a-descriptions-item>
    <a-descriptions-item label="照片">
      <a-image :width="100" :src="record.st_avatar" />
    </a-descriptions-item>
    <a-divider span="3" />
    <a-descriptions-item label="姓名">{{ record.st_name }}</a-descriptions-item>
    <a-descriptions-item label="性别">{{
      record.st_sex == true ? "男" : "女"
    }}</a-descriptions-item>
    <a-descriptions-item label="出生日期">{{
      record.st_birth
    }}</a-descriptions-item>
    <a-divider span="3" />
    <a-descriptions-item label="职位">{{
      roles[record.ro_id]
    }}</a-descriptions-item>
    <a-descriptions-item label="月薪">{{
      record.st_salary
    }}</a-descriptions-item>
    <a-descriptions-item label="入职时间">{{
      record.st_entry
    }}</a-descriptions-item>
    <a-divider span="3" />
    <a-descriptions-item label="电话">{{ record.st_tel }}</a-descriptions-item>
    <a-descriptions-item label="住址" span="2">{{
      record.st_address
    }}</a-descriptions-item>
    <a-divider span="3" />
    <a-descriptions-item label="工作状态">{{
      record.st_state == true ? "在职" : "请假"
    }}</a-descriptions-item>
    <a-descriptions-item label="备注" span="2">
      {{ record.st_remark }}
    </a-descriptions-item>
  </a-descriptions>
</template>

<script>
export default {
  props: ["record"], //定义一个属性可以接收数据

  setup(props) {
    const roles = {
      1000: "总经理",
      1100: "分店经理",
      1200: "销售管理员",
      1300: "库存管理员",
      1400: "收银员",
    };

    // console.log(props.record);

    return {
      roles,
    };
  },
};
</script>

<style scoped>
</style>